<!-- datepicker.html -->
<div ng-switch="view">
  <div ng-switch-when="week">
    <table>
      <thead>
        <tr>
          <th ng-click="prev()"><i class="glyphicon glyphicon-chevron-left" uib-tooltip="{{'COMMON/previous/lbl'|translate}}"></i>
          </th>
          <th colspan="5" class="switch" ng-click="setView('month')" mouse-wheel-up="next()" mouse-wheel-down="prev()">
            <h2>{{date|date:"MMMM yyyy"}} <i class="glyphicon glyphicon-chevron-down" uib-tooltip="{{'DATEPICKER/calendar-monthview/glyph/tooltip'|translate}}" ng-click="setView('date')"></i>
            </h2>
          </th>
          <th ng-click="next()" style='text-align:center'><i class="glyphicon glyphicon-chevron-right" uib-tooltip="{{'COMMON/next/lbl'|translate}}"></i>
          </th>
        </tr>
        <tr>
          <th ng-repeat="day in weekdays" style="overflow: hidden">{{ day|date:"EEE" }}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="week in weeks">
          <td ng-repeat="day in week" class="day">
            <calendar-event serie="event.serie" episode="event.episode" ng-if="hasEvent(day)" ng-repeat="event in getEvents(day)|filterEvents|orderBy:['episode.getAirTime()','serie.name','episode.getFormattedEpisode()']"></calendar-event>
            <span ng-class="{'now':isNow(day),'active':isSameDay(day),'disabled':(day.getMonth()!=date.getMonth()),'after':isAfter(day),'before':isBefore(day)}">
              <em class="dayofweek">{{ day|date:"EEE" }}
                <a class="markday-button markdaydownloaded" ng-click="markDayDownloaded(day)"><i class="glyphicon glyphicon-floppy-disk"></i><span translate-once>COMMON/mark-all-downloaded/lbl</span></a>
                <a class="markday-button markdaywatched" ng-click="markDayWatched(day)"><i class="glyphicon glyphicon-eye-open"></i><span translate-once>COMMON/mark-all-watched/lbl</span></a>
              </em>
              {{day.getDate()}}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="date">
    <table>
      <thead>
        <tr>
          <th ng-click="prev()"><i class="glyphicon glyphicon-chevron-left" uib-tooltip="{{'COMMON/previous/lbl'|translate}}"></i>
          </th>
          <th colspan="5" class="switch" ng-click="setView('month')" mouse-wheel-up="next()" mouse-wheel-down="prev()">
            <h2>{{date|date:"MMMM yyyy"}} <i class="glyphicon glyphicon-chevron-up" uib-tooltip="{{'DATEPICKER/calendar-weekview/glyph/tooltip'|translate}}" ng-click="setView('week')"></i>
            </h2>
          </th>
          <th ng-click="next()" style='text-align:center'><i class="glyphicon glyphicon-chevron-right" uib-tooltip="{{'COMMON/next/lbl'|translate}}"></i>
          </th>
        </tr>
        <tr>
          <th ng-repeat="day in weekdays" style="overflow: hidden">{{ day|date:"EEE" }}</th>
        </tr>
      </thead>
      <tbody class="date">
        <tr ng-repeat="week in weeks">
          <td ng-repeat="day in week" class="day">
              <div ng-repeat="episodes in getSeries(day)" ng-if="hasEvent(day)">
                <calendar-event serie="event.serie" episode="event.episode" ng-if="episodes.length <= 2" ng-repeat="event in episodes|filterEvents|orderBy:['episode.getAirTime()','serie.name','episode.getFormattedEpisode()']"></calendar-event>
                <calendar-event serie="episodes[0].serie" episode="episodes[0].episode" count="episodes.length" ng-if="episodes[0].serie.displaycalendar === 1 && episodes.length > 2 && !isExpanded(day, episodes[0].serie.ID_Serie)" style='color:red'></calendar-event>
                <calendar-event serie="event.serie" episode="event.episode" ng-repeat="event in episodes|filterEvents|orderBy:['episode.getAirTime()','serie.name','episode.getFormattedEpisode()']" ng-if="episodes.length > 2 && isExpanded(day, episodes[0].serie.ID_Serie)" style='color:red'></calendar-event>
              </div>
              <span ng-class="{'now':isNow(day),'active':isSameDay(day),'disabled':(day.getMonth()!=date.getMonth()),'after':isAfter(day),'before':isBefore(day)}">
                <em class="dayofweek">{{ day|date:"EEE" }}
                  <a class="markday-button markdaydownloaded" ng-click="markDayDownloaded(day)"><i class="glyphicon glyphicon-floppy-disk"></i><span translate-once>COMMON/mark-all-downloaded/lbl</span></a>
                  <a class="markday-button markdaywatched" ng-click="markDayWatched(day)"><i class="glyphicon glyphicon-eye-open"></i><span translate-once>COMMON/mark-all-watched/lbl</span></a>
                </em>
                {{day.getDate()}}
              </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="year">
    <table>
      <thead>
        <tr>
          <th ng-click="prev(10)"><i class="glyphicon glyphicon-chevron-left" uib-tooltip="{{'COMMON/previous/lbl'|translate}}"></i>
          </th>
          <th colspan="5" class="switch" mouse-wheel-up="next(10)" mouse-wheel-down="prev(10)">
            <h2>{{years[0].getFullYear()}}-{{years[years.length-1].getFullYear()}}</h2>
          </th>
          <th ng-click="next(10)"><i class="glyphicon glyphicon-chevron-right" uib-tooltip="{{'COMMON/next/lbl'|translate}}"></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="7">
            <span ng-class="{'active':isSameYear(year),'now':isNow(year)}" ng-repeat="year in years" class="year" ng-click="setDate(year)" ng-bind="year.getFullYear()"></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="month">
    <table>
      <thead>
        <tr>
          <th ng-click="prev()"><i class="glyphicon glyphicon-chevron-left" uib-tooltip="{{'COMMON/previous/lbl'|translate}}"></i>
          </th>
          <th colspan="5" class="switch" ng-click="setView('year')" mouse-wheel-up="next()" mouse-wheel-down="prev()">
            <h2>{{ date|date:"yyyy" }}</h2>
          </th>
          <th ng-click="next()"><i class="glyphicon glyphicon-chevron-right" uib-tooltip="{{'COMMON/next/lbl'|translate}}"></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="7">
            <span ng-repeat="month in months" ng-class="{'active':isSameMonth(month),'after':isAfter(month),'before':isBefore(month),'now':isNow(month)}" class="month" ng-click="setDate(month)">{{month|date:'MMM'}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="hours">
    <table>
      <thead>
        <tr>
          <th ng-click="prev(24)"><i class="glyphicon glyphicon-chevron-left" uib-tooltip="{{'COMMON/previous/lbl'|translate}}"></i>
          </th>
          <th colspan="5" class="switch" ng-click="setView('date')" mouse-wheel-up="next(24)" mouse-wheel-down="prev(24)">{{ date|date:"dd MMMM yyyy" }}</th>
          <th ng-click="next(24)"><i class="glyphicon glyphicon-chevron-right" uib-tooltip="{{'COMMON/next/lbl'|translate}}"></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="7">
            <span ng-repeat="hour in hours" ng-class="{'now':isNow(hour),'active':isSameHour(hour)}" ng-click="setDate(hour)" ng-bind="hour.getHours()+':00'"></span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div ng-switch-when="minutes">
    <table>
      <thead>
        <tr>
          <th ng-click="prev()"><i class="glyphicon glyphicon-chevron-left" uib-tooltip="{{'COMMON/previous/lbl'|translate}}"></i>
          </th>
          <th colspan="5" class="switch" ng-click="setView('hours')" mouse-wheel-up="next()" mouse-wheel-down="prev()">{{ date|date:"dd MMMM yyyy" }}
          </th>
          <th ng-click="next()"><i class="glyphicon glyphicon-chevron-right" uib-tooltip="{{'COMMON/next/lbl'|translate}}"></i>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="7">
            <span ng-repeat="minute in minutes" ng-class="{active:isSameMinutes(minute),'now':isNow(minute)}" ng-click="setDate(minute)">{{minute|date:"HH:mm"}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
